<template>
  <div>
    <!-- 首页showPage:0,登录注册页showPage:1,管理页面showPage:2,商品搜索页，展示页:3 -->
    <!-- 这玩意只在首页生效:0-->
    <header-view-vue v-if="showPage === 0" />
    <!-- 只在其他页面生效:2 -->
    <login-header-view-vue v-if="showPage === 2"></login-header-view-vue>
    <show-product-head-view v-if="showPage===3"></show-product-head-view>
    <router-view></router-view>
    <!-- 只在登录页不生效:0|2 -->
    <footer-view-vue v-if="showPage === 0 || showPage === 2||showPage===3"></footer-view-vue>
  </div>
</template>

<script>
import "@/assets/css/style.css";
import HeaderViewVue from "./views/HeaderView.vue";
import FooterViewVue from "./views/FooterView.vue";
import { mapState } from "vuex";
import LoginHeaderViewVue from "./views/LoginHeaderView.vue";
import ShowProductHeadView from "./views/ShowProductHeadView.vue";

// import NewsListView from './views/NewsListView.vue'
export default {
  components: {
    HeaderViewVue,
    FooterViewVue,
    LoginHeaderViewVue,
    ShowProductHeadView
  },
  computed: {
    ...mapState(["showPage"]),
  },
  
  watch: {
    $route(to) {
      if (to.path === "/") {
        this.$store.commit("setShowPage", 0); // 首页
      } else if (to.path === "/login" || to.path === "/register") {
        this.$store.commit("setShowPage", 1); // 登录/注册页
      } else if (to.path === "/SearchProduct"||to.path==="/ShowProduct"||to.path==="/CarProductList") {
        this.$store.commit("setShowPage", 3); //商品展示页，搜索页,购物车
      } else {
        this.$store.commit("setShowPage", 2); // 其他页
      }
    },
  },
  created() {
    // 初始化时根据当前路由设置状态
    this.$store.commit("setShowPage", this.calculateShowPage(this.$route));
  },
  methods: {
    calculateShowPage(route) {
      if (route.path === "/") return 0;
      if (route.path === "/login" || route.path === "/register") return 1;
      if (route.path === "/SearchProductView" || route.path === "/ShowProductView") return 3;
      return 2;
    },
  },
};
</script>

<style>
</style>
